<template>
	<view class="app">
		<view class="top">
			<view class="title center">医生会在4小时内回复您的消息</view>
		</view>

		<view class="center detai">
			<view class="tech-info column center">
				<view class="imageurlll">
					<image :src='content.img'></image>
				</view>
				<view>{{content.name}}</view>
			</view>
			<view class="info center">
				<view class="info-wz">{{content.introduce}}</view>
			</view>
		</view>

		<view class="below">
			<view class="zxbg">咨询表格</view>

			<view class="ling">
				<view class="name">姓名</view>
				<input v-model="formData.name" class="sname" maxlength="15" type="text" placeholder="请输入姓名">
				<view class="ling-x"></view>
			</view>

			<view class="ling">
				<view class="name">联系电话</view>
				<input v-model="formData.phone" class="sname" maxlength="15" type="text" placeholder="请输入联系电话">
				<view class="ling-x"></view>
			</view>

			<view class="ling">
				<view class="name">年龄</view>
				<input v-model="formData.age" class="sname" maxlength="15" type="text" placeholder="请输入年龄">
				<view class="ling-x"></view>
			</view>

			<view class="ling">
				<view class="name">性别</view>
				<radio-group class="radio-group" @change="genderChange">
					<label class="label">
						<radio value="1" checked color="#643A92" style="transform: scale(0.7);" />男
					</label>
					<label class="label">
						<radio value="2" color="#643A92" style="transform: scale(0.7);" />女
					</label>

				</radio-group>
				<view class="ling-x"></view>
			</view>

			<view class="ling">
				<view class="name">是否已婚</view>
				<radio-group class="radio-group" @change="marriageChange">
					<label class="label">
						<radio value="2" checked color="#643A92" style="transform: scale(0.7);" />未婚
					</label>
					<label class="label">
						<radio value="1" color="#643A92" style="transform: scale(0.7);" />已婚
					</label>

				</radio-group>
				<view class="ling-x"></view>
			</view>


			<view class="ling">
				<view class="name">请问您出现这种症状多久了？（单选）</view>
				<radio-group class="radio-group column" @change="symChange">
					<label class="labell">
						<radio value="1" checked color="#643A92" style="transform: scale(0.7);" />一个月
					</label>
					<label class="labell">
						<radio value="2" color="#643A92" style="transform: scale(0.7);" />半年
					</label>

					<label class="labell">
						<radio value="3" color="#643A92" style="transform: scale(0.7);" />一年
					</label>

					<label class="labell">
						<radio value="4" color="#643A92" style="transform: scale(0.7);" />其他
					</label>
				</radio-group>
				<view class="ling-x"></view>
			</view>

			<view class="ling">
				<view class="name">请问您治疗过吗？（多选）</view>
				<view class="zj">
				<u-checkbox-group  size='35rpx' 	 wrap @change="checkboxGroupChange">
					<u-checkbox   label-size='30rpx' shape="circle" active-color="#643A92" @change="checkboxChange"
						v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.name">
						{{item.namet}}
					</u-checkbox>
				</u-checkbox-group>
</view>
				<!-- 			<checkbox-group class="radio-group column" @change="cureChange">
					<label class="labell">
						<checkbox value="1" checked color="#643A92" style="transform: scale(0.7);" />治疗过一次
					</label>
					<label class="labell">
						<checkbox value="2" color="#643A92" style="transform: scale(0.7);" />从未治疗
					</label>

					<label class="labell">
						<checkbox value="3" color="#643A92" style="transform: scale(0.7);" />治疗过，中途放弃了
					</label>

					<label class="labell">
						<checkbox value="4" color="#643A92" style="transform: scale(0.7);" />其他
					</label>
				</checkbox-group> -->

				<view class="ling-x"></view>
			</view>

		</view>

		<view class="center bott-bb">
			<button :loading="loading" :disabled="loading" class="input-content" type="primary"
				@click="submitHandler">提交</button>
		</view>




	</view>
</template>

<script>
	import api from '@/api/doctor.js'
	export default {
		data() {
			return {
				id: null, //医生id
				content: '', // 内容
				formData: { //表单数据
					name: '',
					phone: '',
					age: '',
					gender: 1, // 1男 2女
					marriage: 2, //1是2否
					sym: 1,
					cure: [1]
				},
				loading: false,
				list: [{
						name: 1,
						namet: '治疗过一次',
						checked: true,
						disabled: false
					},
					{
						name: 2,
						namet: '从未治疗',
						checked: false,
						disabled: false
					},
					{
						name: 3,
						namet: '治疗过，中途放弃了',
						checked: false,
						disabled: false
					},
					{
						name: 4,
						namet: '其他',
						checked: false,
						disabled: false
					}
				]
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getDetails()
		},
		methods: {
			// 查询医生详情方法
			async getDetails() {
				const isoj = {
					id: this.id
				}
				const {
					data
				} = await api.getInfo(isoj)
				this.content = data[0]
				console.log(111)
				console.log(this.content)
				console.log(222)
			},

			genderChange(e) {
				this.formData.gender = Number.parseInt(e.detail.value)
				// console.log(typeof this.formData.type)
			},
			marriageChange(e) {
				this.formData.marriage = Number.parseInt(e.detail.value)
				// console.log(typeof this.formData.type)
			},
			symChange(e) {
				this.formData.sym = Number.parseInt(e.detail.value)
				// console.log(typeof this.formData.type)
			},
			cureChange(e) {
				this.formData.cure = e.detail.value
				// console.log(typeof this.formData.type)
			},

			checkboxChange(e) {
				// console.log(e);
			},
			checkboxGroupChange(e) {
				this.formData.cure = e
				console.log(e);
			},

			// 提交反馈意见
			async submitHandler() {
				if (!this.formData.name ||
					this.formData.name.trim().length < 2) {
					this.$util.msg('姓名至少输入10个字')
					return
				}


				if (this.formData.phone &&
					!this.$util.checkStr(this.formData.phone, 'mobile')) {
					this.$util.msg('电话格式错误')
					return
				}

				if (this.formData.age &&
					!this.$util.checkStr(this.formData.age, 'age')) {
					this.$util.msg('年龄格式错误')
					return
				}

				this.loading = true
				uni.showLoading({
					title: '提交中',
					mask: true
				})

				const res = await api.submitFrom({
					id: this.id,
					data: this.formData
				})

				this.loading = false
				uni.hideLoading()
				if (!res.code == 1) {
					this.$util.msg(res.message)
					return
				}

				uni.showModal({
					content: '提交成功！',
					showCancel: false,
					success: () => {
						this.navBack()
					}
				})
			}



		}

	}
</script>

<style lang="scss">
	.u-checkbox{
		margin-top: 10rpx !important;
	}
	.app {
		.top {
			display: flex;
			justify-content: center;
			padding-top: 30rpx;
			width: 750rpx;
			height: 380rpx;
			border-radius: 0 0 40rpx 40rpx;
			background: linear-gradient(0deg, #663B94 0%, #A461C5 50%, #A464C3 100%);

			.title {
				padding-top: 20rpx;
				width: 400rpx;
				height: 25rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}

		.detai {
			.tech-info {
				z-index: 100;
				position: absolute;
				top: 100rpx;

				.imageurlll {
					image {
						width: 130rpx;
						height: 130rpx;
						border-radius: 50%;
						margin-bottom: 20rpx;
					}

				}
			}

			.info {
				width: 690rpx;
				height: 300rpx;
				background: #FFFFFF;
				// background: #007AFF;
				box-shadow: 0px 2rpx 31rpx 1rpx rgba(227, 225, 229, 0.4);
				border-radius: 20rpx;
				position: absolute;
				top: 150rpx;
				padding-top: 130rpx;

				.info-wz {
					width: 630rpx;
					height: 104rpx;
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #999999;
					line-height: 40rpx;
				}

			}


		}

		.below {
			margin-top: 180rpx;
			margin-left: 30rpx;

			.zxbg {
				width: 144rpx;
				height: 36rpx;
				font-size: 36rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #333333;
				margin-bottom: 50rpx;
			}

			.ling {
				margin-bottom: 20rpx;

				.zj {
					margin-top: 10rpx;
					
				}

				.name {
					
					width: 600rpx;
					height: 24rpx;
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #333333;
				}

				.sname {
					margin-top: 20rpx;
					width: 195rpx;
					height: 28rpx;
					font-size: 28rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #999999;
				}

				.ling-x {
					margin-top: 15rpx;
					width: 690rpx;
					height: 10px;
					border-top: solid #EEEEEE 1px;
				}

				.radio-group {
					margin-top: 20rpx;
				}

				.label {
					padding-right: 120rpx;
				}

				.labell {
					margin-bottom: 10rpx;
				}


			}

		}

		.bott-bb {
			background: linear-gradient(90deg, #BB73D5, #643A92);

			.input-content {
				width: 750rpx;
				height: 100rpx;
				background: linear-gradient(90deg, #BB73D5, #643A92);
			}
		}

	}
</style>
